<script setup>
import {onMounted, ref} from "vue";
import Articles from "@/components/Articles.vue";
import {articles} from "@/views/articles/mockArticles.ts";

const state = ref({
  currentIndex: 0,
  news: articles,
  curArticle: {}
})
const articleComponent = ref({})
onMounted(() => {
  state.value.curArticle = articles[state.value.currentIndex]
})
const changeArticle = (i) => {
  state.value.currentIndex = i;
  state.value.curArticle = articles[state.value.currentIndex]
}
const showArticle = () => {
  articleComponent.value.showArticle(state.value.currentIndex)
}
</script>

<template>
  <view class="seg1 container">
    <span class="font140 inter top25 bottomIn d3s">INDUSTRY</span>
    <span class="font140 inter top-2 bottomIn d3s">INSIGHTS</span>
    <view class="font60 top6 bottomIn d3s">行业洞察</view>
  </view>
  <view class="seg2 container">
    <view class="font90 top4">News</view>
    <view class="font36 top2">新闻动态</view>
    <view class="row top6">
      <view class="column left" style="cursor: pointer" @click="showArticle">
        <img class="banner" :src="state.curArticle.album" alt=""/>
        <view class="font24 top6">{{ state.curArticle.title }}</view>
        <view class="font16 top1">{{ state.curArticle.date }}</view>
        <img class="arrow" src="../assets/icons/icon_arrow_line.png" alt=""/>
      </view>
      <view class="column right">
        <view class="column news">
          <view class="column item" v-for="(item,i) in state.news" :key="i" :class="{active: state.currentIndex === i}"
                @click="changeArticle(i)">
            <view class="row" style="align-items: center;">
              <view class="column">
                <view class="font24 title">{{ item.shortTitle }}</view>
                <view class="time font16 top2">{{ item.date }}</view>
              </view>
              <img v-if="state.currentIndex === i" class="arrow" src="../assets/icons/icon_arrow_line.png" alt=""/>
            </view>
            <view v-if="state.currentIndex !== i" class="line" :class="{hide: state.currentIndex === i}"/>
          </view>
        </view>
      </view>
    </view>
  </view>
  <Articles ref="articleComponent"/>
</template>

<style scoped>
.seg1.container {
  height: calc(100vw * 1024 / 1920);
  background-image: url("https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_index_insight_bg.png");
}

.seg2.container {
  height: calc(100vw * 1049 / 1920);

  .left {
    width: 50%;
    border-bottom: solid 1px #979797;

    .banner {
      object-fit: cover;
      max-height: calc(100% / 0.57);
    }

    .arrow {
      width: 1.77em;
      margin-top: 6%;
      margin-left: auto;
    }
  }

  .right {
    width: 50%;
    height: calc(100vw * 0.346);

    .news {
      margin-left: 3.33em;
      overflow-y: scroll;

      .item {
        padding: 1.11em 2.22em;
        margin-top: 2%;
        cursor: pointer;

        &.active {
          background-color: #0490D5;
        }

        &:first-child {
          margin-top: 0;
        }

        .title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .arrow {
          width: 2em;
          height: 1.7em;
          margin-left: auto;
          margin-right: 1.77%;
        }

        .time {
          margin-bottom: 1.11em;
        }

        .line {
          border-top: solid 1px #979797;
          margin-right: 1.77%;

          &.hide {
            border-top: solid 1px transparent;
          }
        }
      }
    }
  }
}
</style>